export default Carousel

function Carousel(el, option = {}) {
    this.el = document.querySelector(el)
    this.init()
    // this.t = null
    this.num = 1

}
Carousel.prototype.init = function () {
    this.loop()
    this.over()
    // this.out()
}
Carousel.prototype.page = function (num) {
    this.el.querySelector('ul li.active').className = ''
    this.el.querySelectorAll('ul li')[num - 1].className = 'active'
}
//每隔1秒自动播放
Carousel.prototype.loop = function () {
    // let num = 1
    this.t = setInterval(() => {
        this.num++
        if (this.num > 7) this.num = 1
        this.el.querySelector('img').src = `./imgs/${this.num}.jpg`
        this.page(this.num)

    }, 1500)


}
//鼠标移入
Carousel.prototype.over = function () {
    let liObj = this.el.querySelectorAll('ul li')
    liObj.forEach((item, i) => {
        item.onmouseover = () => {
            // console.log(item);
            console.log(this.t);
            clearInterval(this.t)
            this.el.querySelector('img').src = `./imgs/${i + 1}.jpg`
            this.num = i + 1
            // this.el.querySelector('ul li.active').className = ''
            // item.className = 'active'
            this.page(this.num)
        }
        item.onmouseout = () => {
            this.out()
        }
    });
}
//鼠标移出
Carousel.prototype.out = function () {
    this.loop()
}








